<!--<script setup lang="ts">-->
<!--import {getCurrentInstance, ref, onBeforeMount, reactive, onBeforeUnmount, onMounted} from "vue";-->

<!--const localVideo = reactive(null)-->
<!--const {proxy} = getCurrentInstance()-->
<!--const localStream=ref<any>({})-->
<!--// onBeforeUnmount(async () => {-->
<!--//    localStream.value= await navigator.mediaDevices.getUserMedia({-->
<!--//     video: true,-->
<!--//     audio: true,-->
<!--//   })-->
<!--// })-->
<!--const getUserMedia=(constrains:any)=> {-->
<!--  if (window.navigator.mediaDevices.getUserMedia) {-->
<!--    return window.navigator.mediaDevices.getUserMedia(constrains);-->
<!--  } else if (window.navigator.webkitGetUserMedia) {-->
<!--    return window.navigator.webkitGetUserMedia(constrains);-->
<!--  } else if (window.navigator.mozGetUserMedia) {-->
<!--    return window.navigator.mozGetUserMedia(constrains);-->
<!--  } else if (window.navigator.getUserMedia) {-->
<!--    return window.navigator.getUserMedia(constrains);-->
<!--  }-->
<!--}-->
<!--const localCameraVideo = ref();-->
<!--const remoteCameraVideo = ref();-->
<!--onMounted(async () => {-->
<!--  // localStream.value= await navigator.mediaDevices.getUserMedia({-->
<!--  //   video: true,-->
<!--  //   audio: true,-->
<!--  // })-->
<!--  // proxy.$refs.localVideo.srcObject=localStream-->
<!--  getUserMedia().then(userMedia => {-->
<!--    //通过video对象的srcObject 赋值userMedia 就能预览到画面-->
<!--    localCameraVideo.value.srcObject = userMedia;-->
<!--    localCameraVideo.value.play();-->
<!--  });-->
<!--})-->
<!--onBeforeUnmount(async ()=>{-->
<!--  localStream.value=await navigator.mediaDevices.getUserMedia({-->
<!--    video: false,-->
<!--    audio: false,-->
<!--  })-->
<!--})-->
<!--// onMounted(async () => {-->
<!--//   // 创建数据源-->
<!--//   const localStream = await navigator.mediaDevices.getUserMedia({-->
<!--//     video: true,-->
<!--//     audio: true,-->
<!--//   });-->
<!--//-->
<!--//   proxy.$refs.localVideo.srcObject=localStream-->
<!--// // // 显示数据源，localVideo 是 html 中的 video 标签-->
<!--// //   localVideo.value.srcObject=localStream.value-->
<!--// })-->

<!--</script>-->

<!--<template>-->
<!--  <div>-->
<!--    <template>-->
<!--      <video ref="localCameraVideo"></video>-->
<!--      <video ref="remoteCameraVideo"></video>-->
<!--    </template>-->

<!--  </div>-->
<!--</template>-->

<!--<style scoped>-->
<!--.video {-->
<!--  width: 100vw;-->
<!--}-->
<!--</style>-->
<template>
  <div class="page-wrapper">
    <div class="video-container-1">
      <img />
    </div>
    <div draggable class="video-container-2">
      <img />
    </div>
    <div class="chat-view"></div>
    <n-card content-style="padding:5px 20px" >
        <n-input>
            <template #suffix>
                <n-icon>
                    <SendOutline/>
                </n-icon>
            </template>
        </n-input>
        <input type="file"/>
    </n-card>
  </div>
</template>
<script setup lang="ts">
import { NCard,NInput,NIcon } from 'naive-ui';
import {SendOutline} from '@vicons/ionicons5'
</script>
<style scoped>
.page-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.video-container-1 {
  width: 100%;
  height: 61.8vw;
  max-height: 790px;
  background-color: #aaaaaa;
}
.video-container-2 {
  width: 90px;
  height: 150px;
  position: fixed;
  z-index: 1;
  background-color: #1e1e1e;
}
.chat-view{
    flex-grow: 1;
}
.input-view{
    height: 60px;

}
</style>
